<template>
  <div class="custom-table container-fluid">
    <div v-if="!announcements.length" class="easy-container no-data">
      {{ isLoading ? '' : '暂无数据' }}</div>
    <div v-for="annc in announcements" :key="annc.id" class="easy-container-x2 border-bottom">
      <h4>{{ annc.title }}</h4>
      <div class="flex align-items-center">
        <timeago class="info" :date-time="annc.created_at" pre-text="发布于 " enable-type="auto"/>
        <DeleteAnnouncementLink v-if="webAdmin" class="m-l-30"
                                :annc="annc" v-on:deletedAnnc="deletedAnnc"/>
      </div>
      <ckeditor :initial-content="annc.content" :readonly="true"/>
    </div>
  </div>
</template>

<script>
import DeleteAnnouncementLink from './DeleteAnnouncementLink';

export default {
  name: 'AnnouncementsList', // 公告列表
  components: { DeleteAnnouncementLink },
  props: {
    announcements: { // 公告列表数据
      type: Array,
      required: true,
    },
    isLoading: { // 是否正在加载
      type: Boolean,
      required: true,
    },
  },
  computed: {
    webAdmin() { return this.$store.state.currentUser.admin; },
  },
  methods: {
    // 删除了公告
    deletedAnnc(annc) { this.announcements.splice(this.announcements.indexOf(annc), 1); },
  },
};
</script>

<style></style>
